<template>
	<view class="indexs">
		<view class="header header_wi" :style="'padding-top: ' + navH + 'px;'">
			<view class="header_height" :style="'height:' + gaodu + 'px;line-height:' + gaodu + 'px;top:' + gaodutops + 'px;'">
				<view class="index_h_cont3">
					<view class="index_wenben_img" @tap="jumpzuo"><image :src="imgUrl + '/dzx_img33.png'" mode="widthFix"></image></view>
					<view class="index_wenben">{{ $t('page_my_querendb.Confirm_packing') }}</view>
				</view>
			</view>
			<view class="coloe_title">s</view>
		</view>
		<view class="index_center" :style="'padding-top:' + (navH + 50) + 'px;padding-bottom: 120rpx;'">
			<view  class="pack_service_tab" v-if="packit.is_todoor!=0 || packit.is_packagestation!=0">
				<view v-if="packit.is_todoor ==1" :class="['pack_service_tab_item', currentTab == 1 ? 'active' : '']" @tap="onTabChange" data-tab="1">{{ $t('page_my_querendb.home_delivery') }}</view>
				<view v-if="packit.is_packagestation == 1" :class="['pack_service_tab_item', currentTab == 2 ? 'active' : '']" @tap="onTabChange" data-tab="2">{{ $t('page_my_querendb.selective_pickup') }}</view>
			</view>
			<view class="my_querendb_center">
				<view class="my_querendb_item1" v-if="currentTab == 1 && packit.is_todoor==1">
					<view class="my_querendb_item1_dis" v-if="arrlistquanbu.length == 0" @tap="tioazhuans">
						<view class="my_querendb_item1_l">
							<image mode="aspectFit" :src="imgUrl + '/dzx_img164.png'"></image>
							<text @tap="tioazhuans">{{ $t('page_my_querendb.add_shipping_address') }}</text>
						</view>

						<view class="my_querendb_item1_r"><image :src="imgUrl + '/dzx_img165.png'"></image></view>
					</view>
					<view class="my_querendb_item1_dis" v-if="arrlistquanbu.length != 0">
						<view class="my_querendb_item1_l">
							<image :src="imgUrl + '/dzx_img164.png'"></image>
							<view class="my_querendb_item1_ltxt">
								<view class="my_querendb_item1_lt1">{{ arrlist.name }} {{ arrlist.phone }}</view>
								<view class="my_querendb_item1_lt2">
									{{ arrlist.country }}{{ arrlist.province }}{{ arrlist.city }}{{ arrlist.district }}{{ arrlist.detail }} {{ arrlist.door }}
								</view>
							</view>
						</view>

						<view class="my_querendb_item1_r">
							<text @tap="tioazhuans">{{ $t('page_my_querendb.replace') }}</text>
						</view>
					</view>
					<view class="my_querendb_item1_img"><image :src="imgUrl + '/dzx_img46.png'"></image></view>
				</view>
				<view class="my_querendb_item1" v-if="currentTab == 2 && packit.is_packagestation == 1">
					<view class="my_querendb_item1_dis" v-if="dlslistall.length == 0" data-url="/pages/mys/select_agent/select_agent?type=xuanze" @tap="tiaozhuandadizhi">
						<view class="my_querendb_item1_l">
							<image :src="imgUrl + '/dzx_img164.png'"></image>
							<text @tap="tiaozhuandadizhi">{{ $t('page_my_querendb.select_pick_point') }}</text>
						</view>
						<view class="my_querendb_item1_r"><image :src="imgUrl + '/dzx_img165.png'"></image></view>
					</view>
					<view class="my_querendb_item1_dis" v-if="dlslistall.length != 0">
						<view class="my_querendb_item1_l">
							<image :src="imgUrl + '/dzx_img164.png'"></image>
							<view class="my_querendb_item1_ltxt">
								<view class="my_querendb_item1_lt1">{{ dlslist.name }} {{ dlslist.phone }}</view>
								<view class="my_querendb_item1_lt2">
									{{ dlslist.country }}{{ dlslist.province }}{{ dlslist.city }}{{ dlslist.district }}{{ dlslist.detail }} {{ dlslist.door }}
								</view>
							</view>
						</view>
						<view class="my_querendb_item1_r">
							<text data-url="/pages/mys/select_agent/select_agent?type=xuanze" @tap="tiaozhuandadizhi">{{ $t('page_my_querendb.replace') }}</text>
						</view>
					</view>
					<view class="my_querendb_item1_img"><image :src="imgUrl + '/dzx_img46.png'"></image></view>
				</view>
				<view class="my_querendb_item2">
					<view class="my_querendb_item2_list">
						<view class="my_querendb_item2_cont">
							<view class="my_querendb_item2_title">
								<text>*</text>
								{{ $t('page_my_querendb.Packing_total') }}
							</view>
							<view class="my_querendb_item2_t1">
								<text>{{ shuliang }}</text>
								{{ $t('page_my_querendb.piece') }}，
								<text>{{ originweight }}</text>
								{{ weight_mode.unit }}，
								<text>{{ free }}</text>
								({{ $t('page_my_querendb.yugufree') }})
							</view>
						</view>
						<view class="my_querendb_item2_cont">
							<view class="my_querendb_item2_title">
								<text>*</text>
								{{ $t('page_my_querendb.shipping_channel') }}
							</view>
							<picker @change="bindPickerChange" :value="index" :range="chuhuolist">
								<view class="my_querendb_item2_xuanze">
									<text>{{ chuhuolist[index] }}</text>
									<image :src="imgUrl + '/dzx_img133.png'"></image>
								</view>
							</picker>
						</view>
						<view class="my_querendb_item2_cont">
							<view class="my_querendb_item2_title">
								<text>*</text>
								{{setting.service_othername}}
								
							</view>
							<view class="my_querendb_item2_txts">
								<view class="my_querendb_item2_wenben">{{ setting.service_des }}</view>
								<view class="my_querendb_item2_txtlist">
									<view
										class="my_querendb_item2_txtcont"
										@tap="gouxuanze"
										:data-id="item.id"
										:data-index="index"
										v-for="(item, index) in baozhuanglist"
										:key="index"
									>
										<image :src="imgUrl + (item.is_show ? 'dzx_img167' : 'dzx_img166') + '.png'"></image>
										<view class="my_querendb_item2_txtcont_t1">
											{{ item.name }}(<text>{{ item.price }}/{{ $t('page_my_querendb.piece') }}</text>)
											<view>{{ item.service_des }}</view>
										</view>
									</view>
								</view>
							</view>
						</view>
						<view class="baoguo_item2_cont" v-if="packit.is_waitreceivedmoney==1">
							<view class="baoguo_item2_cont_l">
								<image :src="imgUrl + '/dzx_img29.png'"></image>
								<text>{{ $t('page_baoguoyg.waitreceivedmoney') }}({{ setting.price_mode.unit }})</text>
							</view>
							<view class="baoguo_item2_cont_r">
								<input type="digit" v-model="waitreceivedmoney" :placeholder="$t('page_baoguoyg.waitreceivedmoney_placeholder')" />
							</view>
						</view>
						<view class="my_querendb_item2_cont" style="margin-top: 0">
							<view class="my_querendb_item2_title">{{ $t('page_my_querendb.Note_information') }}</view>
							<view class="my_querendb_item2_neirong">
								<textarea @input="remarkFun" :placeholder="$t('page_my_querendb.please_enter_remarks')" name="" id="" cols="30" rows="10"></textarea>
							</view>
						</view>
						
						<view class="my_querendb_item3" @tap="gouxuan">
							<image :src="imgUrl + (isshows ? 'dzx_img131' : 'dzx_img132') + '.png'"></image>
							<view class="my_querendb_item3_t1">
								{{ $t('page_my_querendb.viewed_and_agreed') }}
								<text @tap="guizeshows">《{{ guizes.article_title }}》</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="my_querendb_btn">
				<view class="my_querendb_btns">
					<view class="my_querendb_btn1">{{ $t('page_my_querendb.cancel') }}</view>
					<view v-if="!quedingflag" class="my_querendb_btn2" @tap="queding">{{ $t('page_my_querendb.sure') }}</view>
				</view>
			</view>

			<view class="baoguo_guize" v-if="guizeshow">
				<view class="baoguo_guize_banner">
					<view class="baoguo_guize_title">《{{ guizes.article_title }}》</view>
					<rich-text :nodes="article_content"></rich-text>
					<view class="baoguo_guize_btns" @tap="isguizeshows">
						<view class="baoguo_guize_btns_txt">{{ $t('page_my_querendb.isee') }}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
// pages/shouye/shouye_zkc/shouye_zkc.js
const app = getApp();

let request = require('../../../utils/require');

export default {
	data() {
		return {
			navH: app.globalData.navHeight,
			gaodu: app.globalData.height,
			gaodutops: app.globalData.top,
			imgUrl: app.globalData.imgUrl,
			setting:uni.getStorageSync('setting'),
			weight_mode: uni.getStorageSync('weight_mode'),
			price_mode: uni.getStorageSync('price_mode'),
			// is_packagestation: uni.getStorageSync('is_packagestation'),
			guizeshow: false,
			currentTab: 1,
			arrlist: {
				name: '',
				phone: '',
				country: '',
				province: '',
				city: '',
				district: '',
				detail: '',
				door: ''
			},
			dlslist: {
				name: '',
				phone: '',
				country: '',
				province: '',
				city: '',
				district: '',
				detail: '',
				door: ''
			},
			dlslistall: [],
			arrlistquanbu: [],
			address_id: '',
			address_zt_id: '',
			index: 0,
			chuhuoarr: [],
			quedingflag: false,
			//出货渠道
			chuhuolist: [],
			waitreceivedmoney:0,
			//出货渠道列表
			baozhuanglist: [],

			current: [],
			remark: '',
			isshows: false,

			guizes: {
				article_title: ''
			},

			optionsid: '',
			optionssum: 0,
			shuliang: 0,
			article_content: '',
			ischoose: 1,
			packit:'',
			free:0,
			originweight:0,
		};
	},
	/**
	 * 生命周期函数--监听页面加载
	 */ 
	onLoad(options) {
		console.log(options,7654);
		var that = this;
		that.optionsid = options.id
		that.optionssum = options.sum
		that.originweight = options.sum
		that.shuliang = options.shuliang
		that.dizhilist();
		that.dldlist();
	
		that.baozhuang();
		that.guize();
		that.settingFun();
	},
	onShow() {
		var that = this;
		
		let pages = getCurrentPages();
		let currPage = pages[pages.length - 1];
		console.log(this.currentTab,999);
		// #ifdef MP-WEIXIN
		if (currPage.data && currPage.data.address_id) {
			if (this.currentTab == 1) {
				this.address_id = currPage.data.address_id
				this.dizhilist();
			} else if (this.currentTab == 2 && currPage.data.ischoose == 2) {
				this.address_zt_id = currPage.data.address_id
			}
			
		}
		// #endif
		// #ifdef H5
		if (currPage && currPage.address_id) {
			if (this.currentTab == 1) {
				this.address_id = currPage.address_id
				this.dizhilist();
			} else if (this.currentTab == 2 && currPage.ischoose == 2) {
				this.address_zt_id = currPage.address_id
			}
		}
		// #endif
		that.chuhuolistFun();
	},
	/**
	 * 生命周期函数--监听页面初次渲染完成
	 */
	onReady: function() {
	},
	/**
	 * 生命周期函数--监听页面隐藏
	 */
	onHide: function() {},
	/**
	 * 生命周期函数--监听页面卸载
	 */
	onUnload: function() {},
	/**
	 * 页面相关事件处理函数--监听用户下拉动作
	 */
	onPullDownRefresh: function() {},
	/**
	 * 页面上拉触底事件的处理函数
	 */
	onReachBottom: function() {},
	/**
	 * 用户点击右上角分享
	 */
	onShareAppMessage: function() {},
	methods: {
		//计算费用
		getFree(){
			var that = this;
			var data = {
				weight:that.optionssum,
				pack_ids: that.current.join(','),
				line_id:that.chuhuoarr[that.index].id,
				token: uni.getStorageSync('token')
			};
			request.post(`index.php?s=/api/page/getLineWegihtfreeplus&wxapp_id=` + uni.getStorageSync('web_id'), data).then(res => {
				if (res.data.code == 1) {
					that.free = res.data.data.predict.price;
					that.originweight = res.data.data.predict.weight;
					that.weight_mode.unit = res.data.data.predict.unit;
				} else {
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					});
				}
			});
		},
		//设置
		settingFun() {
			var that = this;
			var data = {
				token: uni.getStorageSync('token')
			};
			request.post(`index.php?s=/api/page/service&wxapp_id=` + uni.getStorageSync('web_id'), data).then(res => {
				if (res.data.code == 1) {
					this.packit = res.data.data.userclient.packit;
					this.currentTab = this.packit.is_todoor==1?1:2;
				} else {
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					});
				}
			});
		},
		//验货规则
		guize() {
			var that = this;
			var data = {
				token: uni.getStorageSync('token')
			};
			request.post(`index.php?s=/api/article/report_note&wxapp_id=` + uni.getStorageSync('web_id'), data).then(res => {
				if (res.data.code == 1) {
					var article_content = res.data.data.detail.article_content;
					article_content = article_content.replace(/<img/gi, '<img style="max-width:100%;height:auto;display:block" ');
					that.guizes = res.data.data.detail
					that.article_content = article_content
				}
			});
		},
		//勾选
		gouxuan() {
			this.isshows = !this.isshows
		},

		remarkFun(e) {
			this.remark = e.detail.value
		},
		onTabChange(e) {
			var tabId = e.currentTarget.dataset.tab;
			this.currentTab = tabId
			this.dizhilist();
			this.dldlist();
			console.log(this.arrlist, 7676);
		},
		queding() {
			var that = this;
			console.log(that.arrlist, '?');

			if (that.arrlist) {
				var data = {
					packids: that.optionsid,
					line_id: that.chuhuoarr[that.index].id,
					pack_ids: that.current.join(','),
					address_id: this.currentTab == 1 ? that.address_id : that.address_zt_id,
					currentTab:that.currentTab,
					remark: that.remark,
					waitreceivedmoney:that.waitreceivedmoney,
					token: uni.getStorageSync('token'),
					usermark:uni.getStorageSync('usermark')
				};
				if(uni.getStorageSync("usermark")){
					data['usermark'] = uni.getStorageSync("usermark").mark;
				}
				if (that.isshows) {
					if (this.currentTab == 1 ? that.address_id : that.address_zt_id) {
						(that.quedingflag = true),
							request.post(`index.php?s=/api/package/postpack&wxapp_id=` + uni.getStorageSync('web_id'), data).then(res => {
								if (res.data.code == 1) {
									console.log(res, 'add');
									uni.showToast({
										title: res.data.data
									});
									setTimeout(() => {
										uni.navigateBack({
											delta: 0
										});
									}, 1000);
								} else {
									uni.showToast({
										title: res.data.msg,
										icon: 'none'
									});
								}
							});
					} else {
						uni.showToast({
							title: '请先填写地址',
							icon: 'none'
						});
					}
				} else {
					uni.showToast({
						title: '请查看并勾选规则',
						icon: 'none'
					});
				}
			} else {
				uni.showToast({
					title: '还未填选地址',
					icon: 'none'
				});
			}
		},

		//勾选包装
		gouxuanze(e) {
			var that = this;
			var baozhuanglist = that.baozhuanglist;
			var current = that.current;

			if (baozhuanglist[e.currentTarget.dataset.index].is_show) {
				baozhuanglist[e.currentTarget.dataset.index].is_show = false;

				for (var i = 0; i < current.length; i++) {
					if (e.currentTarget.dataset.id == current[i]) {
						current.splice(i, 1);
					}
				}
			} else {
				baozhuanglist[e.currentTarget.dataset.index].is_show = true;
				current.push(e.currentTarget.dataset.id);
			}

			that.current = current
			that.baozhuanglist =  baozhuanglist
			that.getFree();
		},

		//包装服务
		baozhuang() {
			var that = this;
			var data = {
				token: uni.getStorageSync('token')
			};
			request.post(`index.php?s=/api/package/postservice&wxapp_id=` + uni.getStorageSync('web_id'), data).then(res => {
				if (res.data.code == 1) {
					console.log(res, 'add');
					that.baozhuanglist = res.data.data
				}
			});
		},

		//出货渠道列表
		chuhuolistFun() {
			var that = this;
			var data = {
				token: uni.getStorageSync('token'),
				packids: that.optionsid,
				address_id: that.currentTab == 1 ? that.address_id : that.address_zt_id,
			};
			if(this.packit.is_todoor==0 && this.packit.is_packagestation==1){
				data['address_id'] = that.address_zt_id;
			}
			request.post(`index.php?s=/api/package/lineForShop&wxapp_id=` + uni.getStorageSync('web_id'), data).then(res => {
				if (res.data.code == 1) {
					var arrlist = [];
					for (var i in res.data.data.data) {
						arrlist.push(res.data.data.data[i].name);
					}
					that.chuhuoarr = res.data.data.data
					that.chuhuolist = arrlist;
					that.getFree();
				}
			});
			
		},

		//选择渠道
		bindPickerChange: function(e) {
			console.log('picker发送选择改变，携带值为', e.detail.value);
			this.index = e.detail.value
			this.getFree();
		},

		//跳转选择地址
		tioazhuans() {
			uni.navigateTo({
				url: '/pages/pintuans/dizhi/dizhi?type=xuanze'
			});
		},

		//跳转选择地址
		tiaozhuandadizhi() {
			uni.navigateTo({
				url: '/pages/pintuans/dsdizhi/dizhi?type=xuanze'
			});
		},

		//地址列表
		dizhilist() {
			var that = this;
			var data = {
				token: uni.getStorageSync('token')
			};
			request.post(`index.php?s=/api/address/lists&wxapp_id=` + uni.getStorageSync('web_id'), data).then(res => {
				if (res.data.code == 1) {
					console.log(that.address_id, 'addids');

					if (that.address_id != '') {
						var items = {};
						for (var i = 0; i < res.data.data.list.length; i++) {
							if (that.address_id == res.data.data.list[i].address_id) {
								items = res.data.data.list[i];
							}
						}
						that.arrlist = items
						that.arrlistquanbu = res.data.data.list
					} else {
						that.address_id = res.data.data.list[0]['address_id']
						that.arrlist = res.data.data.list[0]
						that.arrlistquanbu = res.data.data.list
					}
				}
				that.chuhuolistFun();
			});
		},

		//地址列表
		dldlist() {
			var that = this;
			var data = {
				token: uni.getStorageSync('token')
			};
			request.post(`index.php?s=/api/address/dslists&wxapp_id=` + uni.getStorageSync('web_id'), data).then(res => {
				if (res.data.code == 1) {
					console.log(that.address_zt_id, '666');
					if (this.address_zt_id != '') {
						var items_1 = {};
						for (var i = 0; i < res.data.data.list.length; i++) {
							if (that.address_zt_id == res.data.data.list[i].address_id) {
								items_1 = res.data.data.list[i];
							}
						}
						that.dlslist= items_1
						that.dlslistall = res.data.data.list
					} else {
						that.address_zt_id = res.data.data.list[0]['address_id']
						that.dlslist = res.data.data.list[0]
						that.dlslistall= res.data.data.list
						console.log(that.dlslist, '56786');
					}
				}
				that.chuhuolistFun();
			});
		},

		isguizeshows() {
			this.guizeshow = false
		},

		guizeshows() {
			this.guizeshow = true
		},

		jumpzuo() {
			uni.navigateBack();
		}
	}
};
</script>
<style>
@import './my_querendb.css';
</style>
